import React, { Component,useState } from 'react'
import { AgGridReact } from 'ag-grid-react';
import ReactDom from 'react-dom';
export function  App  (props)  {
        var {title,data} = props
        var titleTemp=[]
        var dataTemp =[]
        var deep = data.some(item=> item instanceof Array);
        for(let i =0 ;i<title.length;i++){
            titleTemp.push({field:title[i]})
        }
        const [columnDefs] = useState(titleTemp)
        if(deep){
            for(let i =0 ;i<data.length;i++){
                var dataTemp1 ={}
                for(let j=0;j<title.length;j++){
                    dataTemp1[title[j]] =data[i][j]
                }
                dataTemp.push(dataTemp1)
            }
        }else{
            var dataTemp1 ={}
            for(let j=0;j<title.length;j++){
                dataTemp1[title[j]] =data[j]
            }
            dataTemp.push(dataTemp1)
            console.log(dataTemp);
        }
        const [rowData] = useState(dataTemp);
        return (
              <div className="ag-theme-alpine" style={{height: 400, width: 600}}>
                  <AgGridReact
                      rowData={rowData}
                      columnDefs={columnDefs}>
                  </AgGridReact>
              </div>
          );
       };
       
